<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px" *ngIf="solution">
    <mat-card style="background-color: #f0f0f0">
        <div style="float: right; font-size: 20px; margin-right: 20px" *ngIf="!isMobile">
            <a (click)="starSolution()" matTooltip="关注">
                <span *ngIf="star" class="fa fa-star" style="color: gold"></span>
                <span *ngIf="!star" class="fa fa-star-o"></span>
            </a>
            &nbsp;
            <a (click)="gotoStargazers()">
                <span matTooltip="粉丝数量">
                    {{solution.starCount}}
                </span>
            </a>
        </div>
        <span style="font-weight: bold; font-size: 28px">
            {{solution.name}}
        </span>
        <span *ngIf="isOwner && solution.active && !isMobile" style="font-size: 16px; color: red">
            |我的模型
        </span>
        <span *ngIf="isOwner && !solution.active && !isMobile" style="font-size: 16px; color: red">
            |我的私有模型
        </span>
        <span *ngIf="isManager && !isMobile" style="font-size: 16px; color: red">
            |我是管理员
        </span>
        <span *ngIf="canEdit() && !isMobile" style="font-size: 24px; margin-left: 60px">
            <a (click)="enterEdit()" matTooltip="进入编辑状态" *ngIf="!isEditing">
                <span class="fa fa-edit" style="color: #673ab7"></span>
            </a>
            <a (click)="saveAndQuitEdit()" matTooltip="保存并退出编辑"
               *ngIf="isEditing && solution.version && solution.tag1 && solution.summary && description.content">
                <span class="fa fa-save" style="color: #673ab7"></span>
            </a>
            <a *ngIf="isEditing && !(solution.version && solution.tag1 && solution.summary && description.content)">
                <span class="fa fa-save" style="color: gray"></span>
            </a>
            <span *ngIf="isEditing" style="color: red; font-size: 16px; margin-left: 60px">
                正在编辑...
            </span>
        </span>
        <span *ngIf="!isEditing && (isOperator || isOwner)" style="font-size: 24px; margin-left: 60px">
            <a (click)="deploySolution()" matTooltip="部署模型">
                <span class="fa fa-cloud-upload" style="color: #673ab7"></span>
            </a>
        </span>
    </mat-card>
    <mat-card>
        <mat-tab-group>
            <mat-tab label="基本信息">
                <mat-card style="margin: 20px">
                    <div style="float: right">
                        <mat-card style="width: 200px; height: 200px">
                            <a (click)="changeSolutionPicture()" *ngIf="isEditing">
                                <img matCardImage src="{{solution.pictureUrl}}" *ngIf="solution.pictureUrl" matTooltip="点击更改模型图标">
                                <span *ngIf="!solution.pictureUrl" style="line-height: 150px">点击添加模型头像</span>
                            </a>
                            <a (click)="gotoAbility()" *ngIf="!isEditing && openAbilityUrl">
                                <img matCardImage src="{{solution.pictureUrl}}" alt="blank" matTooltip="点击查看模型部署实例">
                            </a>
                            <a (click)="deploySolution()" *ngIf="!isEditing && !openAbilityUrl">
                                <img matCardImage src="{{solution.pictureUrl}}" alt="blank" matTooltip="部署模型">
                            </a>
                        </mat-card>
                    </div>
                    <div *ngIf="!isEditing">
                        <div *ngIf="isManager && !isMobile" style="font-size: smaller">
                            <p>
                                控制字段（仅管理员可见）：
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主题1： {{solution.subject1}}
                                &nbsp;&nbsp;&nbsp;主题2： {{solution.subject2}}
                                &nbsp;&nbsp;&nbsp;主题3： {{solution.subject3}}
                                &nbsp;&nbsp;&nbsp;显示控制： {{solution.displayOrder}}
                            </p>
                        </div>
                        <br>
                        <p>模型名称： &nbsp;&nbsp;&nbsp;{{solution.name}}</p>
                        <p>版 本 号： &nbsp;&nbsp;&nbsp;{{solution.version}}</p>
                        <p>模型类别： &nbsp;&nbsp;&nbsp;{{solution.modelType}}</p>
                        <p>模型工具： &nbsp;&nbsp;&nbsp;{{solution.toolkitType}}</p>
                        <p>
                            模型作者： &nbsp;&nbsp;&nbsp;
                            <a (click)="gotoPersonal(solution.authorLogin)">
                                {{solution.authorName || solution.authorLogin}}
                            </a>
                            <span *ngIf="isOwner" style="margin-left: 20px; font-weight: bold; color: red">本人</span>
                        </p>
                        <p *ngIf="solution.company">作者单位： &nbsp;&nbsp;&nbsp;{{solution.company}}</p>
                        <p>创建日期： &nbsp;&nbsp;&nbsp;{{solution.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>
                        <p>模型简介：</p>
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{solution.summary}}
                        </p>
                        <p *ngIf="solution.tag1" style="font-size: smaller">
                            标签：
                            &nbsp;&nbsp;&nbsp;
                            <span class="fa fa-tag">
                               {{solution.tag1}}
                            </span>
                            &nbsp;&nbsp;&nbsp;
                            <span class="fa fa-tag" *ngIf="solution.tag2">
                                {{solution.tag2}}
                            </span>
                            &nbsp;&nbsp;&nbsp;
                            <span class="fa fa-tag" *ngIf="solution.tag3">
                                {{solution.tag3}}
                            </span>
                        </p>
                    </div>

                    <div *ngIf="isEditing">
                        <div *ngIf="isManager && !isMobile">
                            <p style="font-weight: bold">
                                控制字段（仅管理员可见）：
                            </p>
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.subject1" type="text" placeholder="主题1" maxlength=20>
                            </mat-form-field>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.subject2" type="text" placeholder="主题2" maxlength=20>
                            </mat-form-field>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.subject3" type="text" placeholder="主题3" maxlength=20>
                            </mat-form-field>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.displayOrder" type="number" placeholder="显示控制">
                            </mat-form-field>
                            <br><br>
                        </div>
                        <div *ngIf="isOwner && !isMobile">
                            <div *ngIf="solution.active">
                                模型当前状态为“公开”，是否设为私有？ &nbsp;&nbsp;&nbsp;
                                <button mat-raised-button color="accent" (click)="setSolutionPublic(false)">
                                    设为私有
                                </button>
                            </div>
                            <div *ngIf="!solution.active">
                                模型当前状态为“私有”，是否设为公开？ &nbsp;&nbsp;&nbsp;
                                <button mat-raised-button color="accent" (click)="setSolutionPublic(true)">
                                    设为公有
                                </button>
                            </div>
                            <br>
                        </div>
                        <p style="font-weight: bold">
                            模型基本信息：
                        </p>
                        <div>
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.name" type="text" placeholder="模型名称" maxlength=30 [required]="isEditing">
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.version" type="text" placeholder="版本号" maxlength=30 [required]="isEditing">
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field>
                                <mat-select [(ngModel)]="solution.modelType" placeholder="模型类别" [required]="isEditing">
                                    <mat-option value="预测">
                                        预测
                                    </mat-option>
                                    <mat-option value="分类">
                                        分类
                                    </mat-option>
                                    <mat-option value="回归">
                                        回归
                                    </mat-option>
                                    <mat-option value="其他">
                                        其他
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field>
                                <mat-select [(ngModel)]="solution.toolkitType" placeholder="模型工具" [required]="isEditing">
                                    <mat-option value="TensorFlow">
                                        TensorFlow
                                    </mat-option>
                                    <mat-option value="Keras">
                                        Keras
                                    </mat-option>
                                    <mat-option value="Scikit-Learn">
                                        Scikit-Learn
                                    </mat-option>
                                    <mat-option value="PyTorch">
                                        PyTorch
                                    </mat-option>
                                    <mat-option value="Python">
                                        Python
                                    </mat-option>
                                    <mat-option value="C/C++">
                                        C/C++
                                    </mat-option>
                                    <mat-option value="其他">
                                        其他
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.company" type="text" placeholder="作者单位" maxlength=20>
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field>
                                <input matInput [(ngModel)]="solution.tag1" type="text" placeholder="标签1" maxlength=20 [required]="isEditing">
                            </mat-form-field>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <mat-form-field *ngIf="solution.tag1">
                                <input matInput [(ngModel)]="solution.tag2" type="text" placeholder="标签2" maxlength=20>
                            </mat-form-field>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <mat-form-field *ngIf="solution.tag1 && solution.tag2">
                                <input matInput [(ngModel)]="solution.tag3" type="text" placeholder="标签3" maxlength=20>
                            </mat-form-field>
                        </div>
                        <div>
                            <mat-form-field style="width: 95%">
                                <textarea matInput style="height: 50px" [(ngModel)]="solution.summary" placeholder="模型简介" maxlength="256" [required]="isEditing">
                                </textarea>
                            </mat-form-field>
                        </div>
                    </div>

                    <br>
                    <div style="font-size: 20px; font-weight: bold">
                        <span>模型概述</span>
                        <span style="color: red" *ngIf="isEditing && !description.content">&nbsp;*</span>
                      </div>
                    <br>
                    <div *ngIf="isEditing">
                        <ueditor [(ngModel)]="description.content"
                                 [config]="{ wordCount: true }"
                                 [loadingTip]="'加载中……'"
                                 (onReady)="_ready($event)"
                                 (onDestroy)="_destroy()"
                                 (ngModelChange)="_change($event)">
                        </ueditor>
                    </div>
                    <div *ngIf="!isEditing">
                        <div [innerHTML]="description.content | html">
                        </div>
                    </div>

                    <mat-card style="margin-top: 30px" *ngIf="isEditing && !isMobile">
                        <p>
                            <button mat-raised-button color="accent" (click)="readyToDelete = !readyToDelete">
                                删除模型
                            </button>
                        </p>

                        <div *ngIf="readyToDelete">
                            <p>
                                模型删除后将不能恢复。如确认删除，请在下列输入模型名称，并点击“确认删除”按钮：
                            </p>
                            <p>
                                <mat-form-field>
                                    <input matInput [(ngModel)]="deleteConfirmText" type="text" placeholder="模型名称">
                                </mat-form-field>
                            </p>
                            <p>
                                <button mat-raised-button color="warn" (click)="deleteSolution()">
                                    确认删除
                                </button>
                            </p>
                        </div>
                    </mat-card>
                </mat-card>
            </mat-tab>

            <mat-tab label="配置数据">
                <div style="margin: 20px">
                    <h5>yaml格式模型配置数据如下：</h5><br>
                    <pre>{{ymlText}}</pre>
                </div>
            </mat-tab>

            <mat-tab label="构件" *ngIf="!isMobile">
                <div style="margin: 20px">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>修改日期</th>
                                <th>大小</th>
                                <th width="100px">操作</th>
                            </tr>
                            </thead>
                            <tbody *ngIf="artifacts">
                            <tr *ngFor="let artifact of artifacts">
                                <td>{{artifact.name}}</td>
                                <td>{{artifact.type}}</td>
                                <td>{{artifact.modifiedDate | date:'yyyy-MM-dd HH:mm'}}</td>
                                <td>
                                    <span *ngIf="artifact.fileSize < 1024">{{artifact.fileSize}} B</span>
                                    <span *ngIf="artifact.fileSize >= 1024">{{(artifact.fileSize / 1024) | number: '1.1-1'}} KB</span>
                                </td>
                                <td width="100px" nowrap>
                                <span *ngIf="(artifact.type !== 'DOCKER镜像') && userLogin">
                                    <a (click)="downloadFile(artifact.url)">
                                        <span class="fa fa-download" style="color: #673ab7"></span>
                                    </a>
                                    <span *ngIf="isTextFile(artifact.url)">
                                        &nbsp;&nbsp;
                                        <a href="{{artifact.url}}" target="_blank">
                                            <span class="fa fa-eye" style="color: #673ab7"></span>
                                        </a>
                                    </span>
                                </span>
                                <span *ngIf="(artifact.type === 'DOCKER镜像') && userLogin">
                                    <a (click)="copyDockerUrl(artifact.url)" matTooltip="docker run {{artifact.url}}">
                                        <span class="fa fa-paste" style="color: #673ab7"></span>
                                    </a>
                                </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </mat-tab>

            <mat-tab label="文档" *ngIf="!isMobile">
                <div style="margin: 20px" *ngIf="canEdit()">
                    <div>
                        <span style="font-weight: bold">上传文档 &nbsp;&nbsp;</span>
                        <input type="file" ng2FileSelect [uploader]="uploader"
                               accept=".pdf, .doc, .docx, .ppt, .pptx, .xls, .xlsx, .jpg, .jpeg, .png, .zip, .rar, .txt" />
                        <span class="float-right">已选择 {{ uploader?.queue?.length }} 个文件</span>
                    </div>
                    <br>
                    <div *ngIf="uploader?.queue?.length > 0">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th width="50%">文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th width="100px">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let item of uploader.queue">
                                <td>{{ item?.file?.name }}</td>
                                <td>{{ item?.file?.size/1024 | number:'1.1-1' }} KB</td>
                                <td>
                                    <span *ngIf="item.isSuccess" style="color: forestgreen">上传成功</span>
                                    <span *ngIf="item.isCancel" style="color: #ffc107">上传被取消</span>
                                    <span *ngIf="item.isError" style="color: red">上传失败</span>
                                </td>
                                <td>
                                    <a (click)="upload(item)" *ngIf="!item.isReady && !item.isUploading && !item.isSuccess">
                                        <span class="fa fa-upload" style="color: #673ab7" matTooltip="上传"></span>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a (click)="item.cancel()" *ngIf="item.isUploading">
                                        <span class="fa fa-ban" style="color: #ffc107" matTooltip="取消"></span>
                                    </a>
                                    <a (click)="item.remove()" *ngIf="!item.isUploading">
                                        <span class="fa fa-remove" style="color: red" matTooltip="移除"></span>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <mat-progress-bar mode="determinate" [value]="uploader.progress"></mat-progress-bar>
                    </div>
                    <br>
                </div>

                <div style="margin: 20px">
                    <span style="font-weight: bold">模型文档</span>
                    <div *ngIf="!documents || documents.length < 1">
                        无
                    </div>
                    <div class="table-responsive" *ngIf="documents && documents.length > 0">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>修改日期</th>
                                <th>大小</th>
                                <th width="100px">操作</th>
                            </tr>
                            </thead>
                            <tbody *ngIf="documents">
                            <tr *ngFor="let document of documents">
                                <td>{{document.name}}</td>
                                <td>{{document.modifiedDate | date:'yyyy-MM-dd HH:mm'}}</td>
                                <td>
                                    <span *ngIf="document.fileSize < 1024">{{document.fileSize}} B</span>
                                    <span *ngIf="document.fileSize >= 1024">{{(document.fileSize / 1024) | number: '1.1-1'}} KB</span>
                                </td>
                                <td width="100px" nowrap>
                                    <a href="{{document.url}}" download matTooltip="下载文档" *ngIf="userLogin">
                                        <span class="fa fa-download" style="color: #673ab7"></span>
                                    </a>
                                    <span *ngIf="canEdit()">
                                    &nbsp;&nbsp;
                                    <a (click)="deleteDocument(document)" matTooltip="删除文档">
                                        <span class="fa fa-trash" style="color: orangered"></span>
                                    </a>
                                </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </mat-tab>

        </mat-tab-group>
    </mat-card>


    <mat-divider></mat-divider>
    <mat-divider></mat-divider>
    <mat-divider></mat-divider>

    <mat-card>
        <br>
        <h3>评论<span style="font-size: 12px">&nbsp;&nbsp; {{solution.commentCount}}条</span></h3>
        <br>
        <mat-card *ngFor="let comment of comments" style="margin: 0 20px 0 20px">
            <div class="row">
                <div class="col-md-1">
                    <div style="text-align: right">
                        <div>
                            {{comment.userLogin}}
                        </div>
                        <div style="font-size: 10px">
                            {{comment.createdDate | date:'yy-MM-dd HH:mm' }}
                        </div>
                    </div>
                </div>
                <div class="col-md-10">
                    <div style="font-size: 14px">
                        {{comment.commentText}}
                    </div>
                    <br>
                    <div *ngIf="comment.isReplying && userLogin">
                        <mat-form-field style="width: 90%; font-size: 12px">
                            <input matInput [(ngModel)]="comment.replyText" type="text" placeholder="回复：" maxlength=250>
                        </mat-form-field>
                        &nbsp;&nbsp;
                        <button (click)="submitReplyComment(comment)" [disabled]="!comment.replyText">
                            <span style="font-size: 12px">提交</span>
                        </button>
                    </div>
                    <div style="font-size: 12px" *ngIf="comment.viewReply">
                        <mat-card *ngFor="let reply1 of comment.replyComments" style="padding-top: 10px; padding-bottom: 10px">
                            <div>
                                <span>{{reply1.createdDate | date:'yy-MM-dd HH:mm'}}&nbsp;|&nbsp;{{reply1.userLogin}}</span>
                                <div  class="pull-right">
                                    <a (click)="toggleViewComment(reply1)" matTooltip="展开回复" *ngIf="reply1.replyComments && reply1.replyComments.length > 0 && !reply1.viewReply">
                                        <span class="fa fa-plus-square" style="color: #673ab7"></span>
                                    </a>
                                    <a (click)="toggleViewComment(reply1)" matTooltip="隐藏回复" *ngIf="reply1.replyComments && reply1.replyComments.length > 0 && reply1.viewReply">
                                        <span class="fa fa-minus-square" style="color: #673ab7"></span>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a (click)="toggleReplyComment(reply1)" matTooltip="回复" *ngIf="userLogin">
                                        <span class="fa fa-reply" style="color: #673ab7"></span>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a (click)="deleteReply(reply1, comment)" matTooltip="删帖" *ngIf="canDeleteComment(reply1)">
                                        <span class="fa fa-trash" style="color: red"></span>
                                    </a>
                                </div>
                            </div>
                            <div>
                                {{reply1.commentText}}
                            </div>
                            <br>
                            <div *ngIf="reply1.isReplying && userLogin">
                                <mat-form-field style="width: 90%; font-size: 12px">
                                    <input matInput [(ngModel)]="reply1.replyText" type="text" placeholder="回复：" maxlength=250>
                                </mat-form-field>
                                &nbsp;&nbsp;
                                <button (click)="submitReplyComment(reply1)" [disabled]="!reply1.replyText">
                                    <span style="font-size: 12px">提交</span>
                                </button>
                            </div>
                            <div *ngIf="reply1.viewReply">
                                <mat-card *ngFor="let reply2 of reply1.replyComments" style="padding-top: 10px; padding-bottom: 10px">
                                    <div>
                                        <span>{{reply2.createdDate | date:'yy-MM-dd HH:mm'}}&nbsp;|&nbsp;{{reply2.userLogin}}</span>
                                        <div  class="pull-right">
                                            <a (click)="deleteReply(reply2, reply1)" matTooltip="删帖" *ngIf="canDeleteComment(reply2)">
                                                <span class="fa fa-trash" style="color: red"></span>
                                            </a>
                                        </div>
                                    </div>
                                    <div>
                                        {{reply2.commentText}}
                                    </div>
                                </mat-card>
                            </div>
                        </mat-card>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="pull-right">
                        <a (click)="toggleViewComment(comment)" matTooltip="展开回复" *ngIf="comment.replyComments && comment.replyComments.length > 0 && !comment.viewReply">
                            <span class="fa fa-plus-square" style="color: #673ab7"></span>
                        </a>
                        <a (click)="toggleViewComment(comment)" matTooltip="隐藏回复" *ngIf="comment.replyComments && comment.replyComments.length > 0 && comment.viewReply">
                            <span class="fa fa-minus-square" style="color: #673ab7"></span>
                        </a>
                        &nbsp;&nbsp;
                        <a (click)="toggleReplyComment(comment)" matTooltip="回复" *ngIf="userLogin">
                            <span class="fa fa-reply" style="color: #673ab7"></span>
                        </a>
                        &nbsp;&nbsp;
                        <a (click)="deleteComment(comment)" matTooltip="删帖" *ngIf="canDeleteComment(comment)">
                            <span class="fa fa-trash" style="color: red"></span>
                        </a>
                    </div>
                </div>
            </div>
        </mat-card>
        <br>
        <div>
            <mat-paginator #paginator
                           [length]="totalItems"
                           [pageSize]="itemsPerPage"
                           [pageSizeOptions]="pageSizeOptions"
                           (page)="reloadPage($event)"
                           showFirstLastButtons>
            </mat-paginator>
        </div>
        <br>
        <div *ngIf="userLogin">
            <mat-form-field style="width: 100%">
            <textarea matInput style="height: 120px" [(ngModel)]="commentText" placeholder="发表评论" maxlength="512">
            </textarea>
            </mat-form-field>
            <div style="text-align: right">
                <button mat-raised-button color="primary" (click)="submitComment('0', 0)" [disabled]="!commentText">
                    <span>提交</span>
                </button>
            </div>
        </div>
        <br><br>
    </mat-card>

</div>


